<template>
  <h1>Hello Vue3</h1>
  <h1>组合式API-setup</h1>
  <h2>{{ msg }}</h2>
  <button @click="changeMsg">点击运行</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

//  ts  项目需要用 defineComponent 包起来,负责 TS 检查和提示
export default defineComponent({
  setup() {
    //  定义普通数据，无需写 data 结构
    let msg = "Nice~";

    //  定义函数，无需写 methods 结构
    const changeMsg = () => {
      console.log("点击事件生效~~~");
    };

    //  在模板中需要使用的数据和函数，需要在 `setup` 返回
    return { msg, changeMsg };
  },
});
</script>


